<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      #box {
        background-color: pink;
        width: 200px;
        height: 200px;
        position: absolute;
        left: 50px;
        top: 20px;
      }
    </style>
  </head>
  <body>
    <!--定义盒子样式 -->
    <div id="box"></div>
    <script>
      var box = document.getElementById('box');
      // 打印盒子的宽度和高度
      console.log(box.offsetWidth);
      console.log(box.offsetHeight);
      // 绑定鼠标指针移动事件
      box.onmousemove = function (e) {
        // 获取盒子的偏移量
        var left = box.offsetLeft;
        var top = box.offsetTop;
        // 计算鼠标指针在盒子内部的坐标
        var x = e.pageX - left;
        var y = e.pageY - top;
        console.log(x, y);
      };
    </script>
  </body>
</html>